<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray } from '@/utils'
  import xmDatePicker from '@/components/xmDatePicker/index.vue';
  const action = reactive({
    total:0,
    timeObj:getPlayEndTime(getDateArray('ymd')),
    searchAllObj:{} as any
  })
  const listQuery = reactive({
    page:1,
    limit:20,
  })
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const decimalCount = (num:number=0)=>{
    if(!num) return '0%'
    return (num*100).toFixed(0) + '%'
  }
  const getList = async()=> {
    const loading = Toastloading()
    const { playTime:date_st, endTime:date_ed } = action.timeObj
    const res = await statisticsApi.statSearchAll({
      date_st,
      date_ed,
      ...listQuery
    })
    loading.close()
    const { data={} } = res
    action.searchAllObj = data
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <xmDatePicker type="daterange" v-model:timeval="action.timeObj" />
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
        </div>
      </div>
    </div>
    <el-descriptions size="medium" direction="vertical" :column="6" border>
      <el-descriptions-item label="参与人数">{{ action.searchAllObj.userNum }}</el-descriptions-item>
      <el-descriptions-item label="参与次数">{{ action.searchAllObj.stakeNumAll }}</el-descriptions-item>
      <el-descriptions-item label="成功次数">{{ action.searchAllObj.stakeNum }}</el-descriptions-item>
      <el-descriptions-item label="消耗金豆数量">{{ action.searchAllObj.stakePriceAll }}</el-descriptions-item>
      <el-descriptions-item label="产出金豆数量">{{ action.searchAllObj.rewardPriceAll }}</el-descriptions-item>
      <el-descriptions-item label="利润金豆数量">{{ action.searchAllObj.porfitNum }}</el-descriptions-item>
      <el-descriptions-item label="利润率">{{ decimalCount(action.searchAllObj.porfitRate) }}</el-descriptions-item>
      <el-descriptions-item label="回馈率">{{ decimalCount(action.searchAllObj.returnRate) }}</el-descriptions-item>
      <el-descriptions-item label="单赛道次数">{{ action.searchAllObj.stakeNum_1 }}</el-descriptions-item>
      <el-descriptions-item label="单赛道消耗金豆数量">{{ action.searchAllObj.stakePrice_1 }}</el-descriptions-item>
      <el-descriptions-item label="双赛道次数">{{ action.searchAllObj.stakeNum_2 }}</el-descriptions-item>
      <el-descriptions-item label="双赛道消耗金豆数量">{{ action.searchAllObj.stakePrice_2 }}</el-descriptions-item>
      <el-descriptions-item label="三赛道次数">{{ action.searchAllObj.stakeNum_3 }}</el-descriptions-item>
      <el-descriptions-item label="三赛道消耗金豆数量">{{ action.searchAllObj.stakePrice_3 }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
